<template>
  <div class="accidentRank-root">
    <formTitleVue
      title="各市事故排行"
      :selectOptions="selectOptions"
    />
    <el-table
      :data="tableData"
      class="table"
      height="30vh"
      border
      style="width: 100%">
      <el-table-column
        prop="rank"
        label="排行">
      </el-table-column>
      <el-table-column
        prop="areaName"
        label="名称">
      </el-table-column>
      <el-table-column
        prop="govNum"
        label="市政设施">
      </el-table-column>
      <el-table-column
        prop="houseNum"
        label="房屋建筑">
      </el-table-column>
      <el-table-column
        prop="trafficNum"
        label="交通设施">
      </el-table-column>
      <el-table-column
        prop="personNum"
        label="人员密集区域"
        width="110px">
      </el-table-column>
      <el-table-column
        prop="constructNum"
        label="在建工地">
      </el-table-column>
      <el-table-column
        prop="allNum"
        label="总数">
      </el-table-column>

    </el-table>
    <!-- <v-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :loading="loading"
      :is-index="true"
      title=""
      maxHeight="30vh"
      ref="table"
    >
    </v-table> -->
  </div>
</template>

<script>
import VTable from "@/components/VTable/index";
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import { time_select_optios } from '@/utils/global.js';
import { accidentRank  } from '@/api/risk/accidentCases'

export default {
  name: "accidentRank",
  components: {
    VTable,
    formTitleVue,
  },
  data() {
    return {
      tableData: [],
      selectOptions: [
        {
          selectValue: "近一月",
          options:[
            { label: "近一月", value: "近一月" },
            { label: "近半年", value: "近半年" },
            { label: "近一年", value: "近一年" },
          ],
          changeFn: this.selectChange2,
        }
      ],
      tableData: [],
      loading: false,
      searChForm: {
        startTime: '',
        endTime: '',
        areaCode:"",
        placeType:""
      },
    };
  },
  methods: {
    selectChange2(item){
      this.searChForm.startTime = time_select_optios[item].startTime
      this.searChForm.endTime = time_select_optios[item].endTime
      this.getData()
    },
    init(){
      this.searChForm.startTime = time_select_optios[this.selectOptions[0].selectValue].startTime
      this.searChForm.endTime = time_select_optios[this.selectOptions[0].selectValue].endTime
      this.getData()
    },
    getData() {
      this.loading = true;
      this.searChForm.areaCode = this.$store.state.account.user.deptIds;
      this.searChForm.placeType = this.$commonJs.getPlaceType(this.searChForm.areaCode);
      accidentRank(this.searChForm).then(res=>{
        if(res.code==200){
            this.tableData = res.data
        }
      }).finally(f=>{
        this.loading = false
      })
    },
  },
  mounted() {
    this.init()
  },
};
</script>

<style lang="scss" scoped>
.accidentRank-root {

}
</style>
